<template>
  <van-tabbar
    v-model="active"
    :fixed="true"
    active-color="orange"
    :placeholder="true"
    @change="fn"
  >
    <van-tabbar-item to="/home/index">
      首页
      <template #icon>
        <span>🏀</span>
      </template>
    </van-tabbar-item>
    <van-tabbar-item icon="apps-o" to="/home/classify">分类</van-tabbar-item>
    <van-tabbar-item icon="cart-o" to="/home/cart">购物车</van-tabbar-item>
    <van-tabbar-item icon="contact" to="/home/mine">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const active = ref<number>(0);

const fn = (active: number | string) => {
  console.log(active);
};
</script>
